<template>
  <div class="goods-detail">
    <myheader titleName='商品详情'></myheader>

    <mt-swipe class="swiperbox">
      <mt-swipe-item v-for='(item , index) in imgList' :key='index'><img :src="item.src" alt="图片详情"></mt-swipe-item>
    </mt-swipe>
    <div>
      <h4 class="goods-title">{{goodsInfo.title}}</h4>
      <p class="goods-price"><span class="market-price">￥{{goodsInfo.market_price}}</span><span class="sell-price">￥{{goodsInfo.sell_price}}</span></p>
    </div>
    <div class="goods-info">
      <h4 class="goods-desc">商品参数</h4>
      <p>商品编号：{{goodsInfo.goods_no}}</p>
      <p>库存：{{goodsInfo.stock_quantity}}</p>
      <p>上架时间：{{goodsInfo.add_time | fmtTime}}</p>
    </div>
    <mt-button type="primary" size='large' @click='jumpTo("goodsdesc")'>图文介绍</mt-button>
    <mt-button type="danger" size='large' @click='jumpTo("goodscomment")'>商品评论</mt-button>
    <div class="goods-footer">
      <div class="goods-footer-item contact"><span class="iconfont icon-kefu"></span><span>联系客服</span></div>
      <div class="goods-footer-item cart">
        <span class="iconfont icon-gouwuche"></span>
        <span>购物车</span>
        <span class="badge">{{$store.state.cart.goodsNum}}</span>
      </div>
      <!-- 1.1 给加入购物车绑定事件 -->
      <div class="goods-footer-item add" @click='addToCart'><span>加入购物车</span></div>
      <div class="goods-footer-item buy" @click='jumpTo("cart")'><span>立即购买</span></div>
    </div>
  </div>
</template>
<script>
import myheader from '@/components/myheader'
import { getThumb, getGoodsInfo, getShopInfo } from '@/api'
export default {
  components: {
    myheader
  },
  data () {
    return {
      id: this.$route.params.id,
      imgList: [], // 轮播图数据
      goodsInfo: {}, // 商品信息
      cartListPage: [] // 这个数组的目的是从本地获取数组，判断里面的num总数是多少
    }
  },
  mounted () {
    // 页面一进来就利用vuex设置goodsNum
    this.$store.commit('setNum')
    this.initSwiper()
    this.initGoodsInfo()
    // 1.4 页面一加载就去获取本地的数据
    this.cartListPage = JSON.parse(localStorage.getItem('cartList') || '[]')
  },
  // 1.5 创建一个获取总数量的计算属性
  computed: {
    totalNum () {
      let total = 0
      this.cartListPage.map(item => {
        // 循环页面数组，将所有项的num数量加起来
        total += item.num
      })
      return total
    }
  },
  methods: {
    // 初始化轮播图
    initSwiper () {
      getThumb(this.id).then(res => {
        // console.log(res)
        this.imgList = res.message
      })
    },
    // 初始化商品信息
    initGoodsInfo () {
      getGoodsInfo(this.id).then(res => {
        // console.log(res)
        this.goodsInfo = res.message[0]
      })
    },
    // 跳转
    jumpTo (pathName) {
      this.$router.push({ name: pathName })
    },
    // 1.1.2 定义添加购物车函数
    addToCart () {
      // 1.2 先判断本地有没有当前添加的那个商品，如果没有，就直接将该商品信息（id、选中状态、图片、标题、价格、数量）添加至本地；如果有，就将该商品的数量加1
      let cartList = JSON.parse(localStorage.getItem('cartList') || '[]') // 需要保证拿到的数据是数组，再进行转化
      // 1.2.1 调用下面这个方法的目的是要去获取(id、图片、标题、价格)，拼接一个商品对象的信息出来，用于保存到本地
      getShopInfo(this.id)
        .then(res => {
          console.log(res)
          // 1.2.2 用临时对象存储请求回来的商品信息
          let tempObj = {
            id: res.message[0].id,
            selectState: true, // 选中状态默认为true
            img: res.message[0].thumb_path,
            title: res.message[0].title,
            price: res.message[0].sell_price,
            num: 1
          }
          // 1.2.3 判断本地取回的数组中是否存在上面id的那个商品。利用findIndex来找，看是否存在那个id项对应的索引，如果存在，就返回该索引；如果不存在，就返回 -1
          // let idx = cartList.findIndex(item => item.id === res.message[0].id) // 注意：路由里面的id是字符串，里面的值才是数字-如parseInt(this.id)
          let idx = cartList.findIndex(item => item.id === parseInt(this.id))
          if (idx === -1) {
          // 不存在，就直接push进数组中
            cartList.push(tempObj)
          } else {
          // 存在，将该项对应的num + 1
            cartList[idx].num += 1
          }
          // 1.3 将新的数据存入本地
          localStorage.setItem('cartList', JSON.stringify(cartList))
          // 1.6 将本地存储的数据与页面保存一致，目的是用于num总数的更新
          this.cartListPage = cartList

          // 添加购物车成功以后，需要修改vuex中state的goodsNum数量
          this.$store.commit('addToCart')
        })
    }
  }
}
</script>
<style lang="scss" scoped>
  .goods-detail {
    margin-bottom: 50px;
    padding: 0 10px;
  }
  .swiperbox {
    height: 300px;
    img {
      width: 100%;
    }
  }

  .goods-title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
  }
  .goods-price {
    font-size: 14px;
    .market-price {
      text-decoration: line-through;
    }
    .sell-price {
      color: #e4393c;
    }
  }

  .goods-info {
    font-size: 14px;
    .goods-desc {
      margin-top: 10px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .goods-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
    border-top: 1px solid #e7e7e7;
    background-color: #fff;
    .goods-footer-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .contact,
    .cart {
      width: 40%;
      font-size: 12px;
      position: relative;
    }
    .badge {
      position: absolute;
      top: 3%;
      left: 50%;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      background-color: #e4393c;
      text-align: center;
      line-height: 14px;
      color: white;
    }
    .add,
    .buy {
      width: 60%;
      color: white;
      & > span {
        font-size: 20px;
      }
    }
    .add {
      background-color: #ff9600;
    }
    .buy {
      background-color: #e4393c;
    }
  }
</style>
